//out: ../css/

.main {
    width: 100%;

    .banner-main {
        width: 678px;
        height: 240px;
    }

    // 切换按钮
    .nav-list {
        display: flex;
        justify-content: space-between;
        width: 1200px;
        height: 76px;
        margin-top: 60px;
        margin-bottom: 40px;
        padding: 6px;
        opacity: 1;
        border-radius: 20px;
        background: rgba(247, 251, 254, 1);
        border: 1px solid rgba(228, 231, 235, 1);

        .item-nav {
            width: 297px;
            height: 64px;
            opacity: 1;
            font-size: 20px;
            font-weight: 400;
            letter-spacing: 0px;
            line-height: 64px;
            color: rgba(51, 51, 51, 1);
            text-align: center;

            &.active {
                border-radius: 16px;
                background: rgba(255, 255, 255, 1);
                box-shadow: 0px 2px 4px rgba(223, 234, 242, 0.39), 0px 10px 20px 10px rgba(223, 234, 242, 0.2);
            }
        }
    }

    //类别内容列表
    .category-list {
        width: 100%;

        .item-category {
            display: none;
            width: 100%;
            min-height: 300px;

            //公司介绍
            &:nth-child(1) {

                // 公司概况
                .overview {
                    display: flex;
                    width: 1200px;
                    height: 492px;
                    border-radius: 20px;
                    background: rgba(247, 249, 250, 1);

                    .keypoint-list {
                        display: flex;
                        flex-wrap: wrap;
                        justify-content: space-between;
                        width: 602px;
                        height: 100%;
                        padding-top: 128px;
                        padding-bottom: 128px;
                        padding-left: 140px;
                        padding-right: 50px;

                        .item-keypoint {
                            width: 169px;

                            .title {
                                width: 169px;
                                height: 66px;
                                font-size: 56px;
                                font-weight: 700;
                                letter-spacing: 0px;
                                line-height: 65.63px;
                                color: rgba(51, 51, 51, 1);
                                text-align: left;
                                vertical-align: top;
                            }

                            .desc {
                                height: 26px;
                                font-size: 22px;
                                font-weight: 400;
                                letter-spacing: 0px;
                                line-height: 25.78px;
                                color: rgba(153, 153, 153, 1);
                                text-align: left;
                                vertical-align: top;
                            }
                        }
                    }

                    .courses {
                        position: relative;
                        width: 405px;
                        height: 405px;
                        align-self: center;

                        .circle {
                            position: absolute;
                            width: 230px;
                            height: 230px;
                            border-radius: 50%;
                            font-size: 18px;
                            font-weight: 400;
                            letter-spacing: 0px;
                            color: rgba(51, 51, 51, 1);
                            text-align: center;
                            line-height: 230px;


                            &:nth-child(1) {
                                top: 0;
                                left: 0;
                                background: linear-gradient(180deg, rgba(251, 194, 235, 0.1) 0%, rgba(166, 193, 238, 1) 100%);
                            }

                            &:nth-child(2) {
                                top: 0;
                                right: 0;
                                background: linear-gradient(180deg, rgba(255, 236, 210, 1) 0%, rgba(252, 182, 159, 0.1) 100%);
                            }

                            &:nth-child(3) {
                                bottom: 0;
                                left: 0;
                                background: linear-gradient(180deg, rgba(253, 160, 133, 0.1) 0%, rgba(246, 211, 101, 1) 100%);
                            }

                            &:nth-child(4) {
                                bottom: 0;
                                right: 0;
                                background: linear-gradient(180deg, rgba(205, 156, 242, 1) 0%, rgba(246, 243, 255, 0.1) 100%);
                            }
                        }
                    }
                }

                // 关于职创
                .profile {
                    width: 1200px;
                    margin-top: 150px;

                    // 职创简介
                    .introduce {
                        display: flex;
                        justify-content: space-between;
                        width: 100%;
                        padding-top: 60px;

                        img {
                            width: 559px;
                            height: 313px;
                        }

                        .summary {
                            display: flex;
                            flex-direction: column;
                            justify-content: space-between;
                            width: 600px;
                            height: 336px;

                            p {
                                text-indent: 2em;
                                font-size: 20px;
                                font-weight: 400;
                                letter-spacing: 0px;
                                line-height: 32px;
                                color: rgba(51, 51, 51, 1);
                            }
                        }
                    }

                    // 公司标语
                    .slogan {
                        display: flex;
                        width: 1200px;
                        height: 480px;
                        margin-top: 50px;
                        padding: 60px;
                        border-radius: 20px;
                        background: rgba(247, 249, 250, 1);

                        .left-dream-list,
                        .right-dream-list {
                            display: flex;
                            flex-direction: column;
                            justify-content: space-between;
                            flex: 1;
                        }

                        .left-dream-list {
                            border-right: 1px solid rgba(228, 231, 235, 1);

                            .item-left-dream {
                                display: flex;
                                justify-content: end;

                                .dream {
                                    text-align: right;

                                    .title {
                                        font-size: 44px;
                                        font-weight: 500;
                                        letter-spacing: 0px;
                                        line-height: 51.57px;
                                        color: rgba(51, 51, 51, 1);
                                    }

                                    .desc {
                                        margin-top: 11px;
                                        font-size: 20px;
                                        font-weight: 400;
                                        letter-spacing: 0px;
                                        line-height: 26px;
                                        color: rgba(51, 51, 51, 1);
                                    }
                                }

                                img {
                                    width: 125px;
                                    height: 125px;
                                    margin-right: 40px;
                                    margin-left: 50px;
                                    vertical-align: middle;
                                }
                            }
                        }

                        .right-dream-list {

                            .item-right-dream {
                                display: flex;
                                justify-content: start;

                                img {
                                    width: 125px;
                                    height: 125px;
                                    margin-left: 40px;
                                    margin-right: 50px;
                                    vertical-align: middle;
                                }

                                .dream {
                                    text-align: left;

                                    .title {
                                        font-size: 44px;
                                        font-weight: 500;
                                        letter-spacing: 0px;
                                        line-height: 51.57px;
                                        color: rgba(51, 51, 51, 1);
                                    }

                                    .desc {
                                        margin-top: 11px;
                                        font-size: 20px;
                                        font-weight: 400;
                                        letter-spacing: 0px;
                                        line-height: 26px;
                                        color: rgba(51, 51, 51, 1);
                                    }
                                }
                            }

                        }
                    }
                }
            }

            &:nth-child(2) {
                width: 1200px;

                table {
                    width: 1200px;
                    height: 512px;
                    margin-top: 60px;
                    border-spacing: 0;
                    border-radius: 20px;
                    background: rgba(255, 255, 255, 1);
                    box-shadow: 0px 2px 4px rgba(223, 234, 242, 0.39), 0px 10px 20px 10px rgba(223, 234, 242, 0.2);

                    thead {
                        height: 93px;
                        border-radius: 20px 20px 0 0;
                        background: rgba(247, 249, 250, 1);

                        tr {
                            th {
                                text-align: center;
                                border-right: 1px solid rgba(228, 231, 235, 1);
                                border-bottom: 1px solid rgba(228, 231, 235, 1);
                                font-size: 20px;
                                font-weight: 500;
                                letter-spacing: 0px;
                                color: rgba(51, 51, 51, 1);

                                &:nth-child(1) {
                                    width: 220px;
                                    border-top-left-radius: 20px;
                                }

                                &:nth-child(2) {
                                    width: 330px;
                                }

                                &:nth-child(3) {
                                    width: 250px;
                                }

                                &:nth-child(4) {
                                    width: 180px;
                                }

                                &:nth-child(5) {
                                    width: 220px;
                                    border-top-right-radius: 20px;
                                    border-right: none;
                                }
                            }
                        }
                    }

                    tbody {
                        height: 320px;

                        tr {
                            td {
                                text-align: center;
                                border-right: 1px solid rgba(228, 231, 235, 1);
                                border-bottom: 1px solid rgba(228, 231, 235, 1);
                                font-size: 20px;
                                font-weight: 400;
                                letter-spacing: 0px;
                                color: rgba(51, 51, 51, 1);

                                &:last-child {
                                    border-right: none;
                                }
                            }
                        }
                    }

                    tfoot {
                        height: 99px;

                        tr {
                            td {
                                text-align: center;
                                font-size: 16px;
                                font-weight: 400;
                                letter-spacing: 0px;
                                color: rgba(51, 51, 51, 1);

                                span {
                                    color: rgba(24, 66, 182, 1);
                                }
                            }
                        }
                    }
                }
            }

            &:nth-child(3) {
                width: 1200px;
                background: red;
            }

            &:nth-child(4) {
                width: 1200px;
            }

            &.active {
                display: block;
            }
        }
    }
}